<!-- 部门管理 -->
<template>
    <div>
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
            <el-form-item label="部门名称：">
                <el-input placeholder="请输入部门名称" v-model.trim="ruleForm.departname" maxlength="20" size="small"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="searchList" id="monitorEnter" size="small">查询</el-button>
                <el-button type="primary" @click="dialogFormVisible = true,form.id=null,form.name=null" size="small">新建部门</el-button>
                <el-button size="small" type="primary" @click="downExcelHandle">下载导入模版</el-button>
                <a :href="downUrl" ref="downNode" target="_blank"></a>
                <el-button size="small" type="primary" @click="upLoadHandle">批量导入</el-button>
                <input type="file" ref="upLoad" style="display: none;" @change="fileChangeHandle">
            </el-form-item>
        </el-form>

        <el-dialog :title="titleType=='edit'? '编辑部门':'新建部门'" :visible.sync="dialogFormVisible" width="500px" :close-on-click-modal="modelclose">
            <el-form :model="form">
                <el-form-item label="部门名称:" :label-width="formLabelWidth">
                    <el-input v-model.trim="form.name" placeholder="请输入部门名称" autocomplete="off" style="width: 300px;" maxlength="20"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="savehander">保存</el-button>
            </div>
        </el-dialog>

        <el-table :data="tableData" border>
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column label="部门ID" prop="departmentCode" align="center"></el-table-column>
            <el-table-column label="部门" prop="departmentName" align="center"></el-table-column>
            <el-table-column label="创建人" prop="creatorName" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="edithander('push',scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="ruleForm.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="ruleForm.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="totalSize">
            </el-pagination>
        </div>

    </div>
</template>
<script>
    import api from '@/api/apiPath'
    export default {
        title: '部门管理',
        data() {
            return {
                modelclose:false,
                tokenId:undefined,
                dialogFormVisible: false,
                downUrl: api.DEPARTDOWNLOAD,
                titleType:'add',
                ruleForm: {
                    departname: undefined,
                    pageNum: 1,
                    pageSize: 10,
                },
                totalSize: 0,
                form: {
                    name: "",
                    id: null
                },
                formLabelWidth: '120px',
                tableData: [],
            }
        },

        methods: {
            searchList() {
                this.ruleForm.pageNum = 1
                this.getlist()
            },
            handleCurrentChange() {
                this.getlist()
            },
            handleSizeChange(val) {
                this.ruleForm.pageSize = val
                this.getlist();
            },
            downExcelHandle() {
                this.$refs.downNode.click()
            },
            upLoadHandle() {
                this.$refs.upLoad.value = '' // 每次点击清空上次的值
                this.$refs.upLoad.click()
            },
            getlist() {
                this.axios.post(api.getAllDepartmentPageList, {
                    pageSize: this.ruleForm.pageSize,
                    pageNum: this.ruleForm.pageNum,
                    departmentName: this.ruleForm.departname
                }).then((res) => {
                    this.tableData = res.data.data.list;
                    this.totalSize = res.data.data.total;
                })
            },
            edithander(type, row) {
            	this.titleType = 'edit'
                this.dialogFormVisible = true;
                if (type === "push") {
                    this.form.name = row.departmentName;
                    this.form.id = row.id;
                }
            },
            savehander() {
                if (this.form.name) {
                    let url = api.addDepartment;
                    if (this.form.id) {
                        url = api.editDepartment;
                    }
                    this.axios.post(url, {
                        departmentName: this.form.name,
                        id: this.form.id
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.dialogFormVisible = false;
                            this.form.name = "";
                            this.$message({
                                message: this.form.id ? '修改成功' : '新增成功',
                                type: 'success'
                            });
                            this.getlist()
                        }
                    })
                } else {
                    this.$message({
                        message: '部门名称不能为空',
                        type: 'warning'
                    });
                }
            },
            fileChangeHandle() {
                const file = this.$refs.upLoad.files[0]
                if (file) {
                    let param = new FormData()
                    param.append('excelFile', file)
                    this.axios.post(api.DEPARTUPLOAD, param).then((res)=>{
                          if (res.data.code == 200) {
                             this.$message({
                                  message: '导入成功',
                                  type: 'success'
                              });
                              this.getlist();
                          }  
                    })
                }
            },
        },
        activated(){
            this.searchList()
        },
        created() {
            this.getlist()
        }
    }
</script>


<style lang="stylus" scoped>
</style>